<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 280px;
				border: 5px solid gold;
				margin: 100px auto;
				overflow: hidden;
			}
			ul{
				width: 1000px;
				height: 280px;
				
				animation: move 10s linear infinite;
			}
			ul li{
				width: 200px;
				height: 280px;
				float: left;
				list-style: none;
			}
			ul li img{
				width: 200px;
				height: 280px;
			}
			ul:hover{
				animation-play-state: paused;
			}
			@keyframes move{
				from{
					margin-left: 0;
				}
				to{
					margin-left: -800px;
					/* margin-left: -600px; */
				}
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li><img src="../img/ms1.PNG"/></li>
				<li><img src="../img/ms2.PNG"/></li>
				<li><img src="../img/ms3.PNG"/></li>
				<li><img src="../img/ms4.PNG"/></li>
			>
				<!-- <li><img src="img/ms1.PNG"/></li> -->
				<!-- 若要设置四张图片的轮播，应另外再添加一张第一张的img，为了防止图片的不流畅播放（注意同步修改margin-left的像素） -->
			</ul>
		</div>
	</body>
